<template>
  <div>
    <div  class="header">
      <h3><span @click="gotoHome()">&lt;</span>城市选择</h3>
      <div>
        <a href="javascript:;" :style="{backgroundColor:(flag?'#fff':''),color:(flag?'skyblue':'')}"   @click.prevent="cersy()">境内</a>
        <a href="javascript:;" :style="{backgroundColor:(!flag?'#fff':''),color:(!flag?'skyblue':'')}" @click.prevent="cersy()">境外</a>
      </div>
    </div>
    <component :is="comName"></component>
  </div>
</template>


<script>
import CiryTerr from './Terr';
import CiryAbro from './Abro';

export default {
  name: 'Home',
  data () {
    return {
      flag:true,
      comName: 'CiryAbro'
    }
  },
  methods: {
    cersy() {
        this.flag = !this.flag
        this.flag ? this.comName='CiryAbro' : this.comName='CiryTerr'
    },
    gotoHome() {
      this.$router.push('/');
    }
  },
  components: {
    CiryTerr,
    CiryAbro
  }
}
</script>

<style lang="less" scoped>
  .header {
    color: var(--fontcolor);
    width: 100%;
    line-height: 0.44rem;
    background-color: var(--bascolor);
    align-items:center;

    > h3 {
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        position: relative;

        >span {
          position: absolute;
          width: 20px;
          height: 20px;
          display: block;
          top: 5px;
          left: 20px;
        }
    }

    > div {
        width: 250px;
        display: flex;
        margin: 0 auto;
        line-height: 20px;

        >a {
            border: 2px solid #fff;
            display: block;
            font-size: 14px;
            color: #fff;
            flex:1;
            text-align: center;
        }
    }
  }
</style>
